<template>
    <div class="home"></div>
</template>

<script>
    export default {
        name: 'Home',
        created() {
            
        },
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style scoped>
    /*开始考试波纹*/
    .StartExamBtn {
        width: 130.5px;
        height: 130.5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 3px 0 rgba(6, 63, 164, 0.3);
    }

    /************以下为具体实现************/

    .wave {
        width: 130.5px;
        height: 130.5px;
        border-radius: 50%;
        position: relative;
    }

    .content {
        color: rgba(44, 135, 255, 1);
        font-size: 20px;
        font-weight: bold;
        line-height: 130.5px;
        text-align: center;
    }

    .wave .circle {
        position: absolute;
        border-radius: 50%;
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.5);
        /*width: 100%; !* 减去边框的大小 *!*/
        /*height: 100%; !* 减去边框的大小 *!*/
        width: calc(100% - 2px); /* 减去边框的大小 */
        height: calc(100% - 2px); /* 减去边框的大小 */
    }

    /* 波纹效果 */
    .wave.ripple .circle:first-child {
        animation: circle-opacity 2s infinite;
    }

    .wave.ripple .circle:nth-child(2) {
        animation: circle-opacity 2s infinite;
        animation-delay: .3s;
    }

    .wave.ripple .circle:nth-child(3) {
        animation: circle-opacity 2s infinite;
        animation-delay: .6s;
    }

    .wave.ripple.danger .circle {
        border-color: #ffffff;
    }

    @keyframes circle-opacity {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale(1.5);
        }
    }


</style>
